<template>
	<view class="tabs">
		<view style="height: 70rpx;" class="page-section-spacing">
			<view class="scroll-view-item_H " v-for="(item,index) in tabList" @tap="changeTab(index)">
				<view class="animate__animated" hover-class="animate__rubberBand"
					:class="index == isActive ? 'active' :''">
					{{item.name}}
				</view>
				<view class="" :class="index == isActive ? 'line' :''"></view>
			</view>
		</view>
		<view class="page-section-spacing">
			<scroll-view :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
				@refresherrefresh='refresherrefresh()' refresher-background="#FFFFFF" @scrolltolower='nextPage()'
				lower-threshold="500" class="" scroll-y :style="{height: orderHeight+'px'}">
				<view class="card box-c animated fadeIn" hover-class="tada" v-if="!isNull" v-for="item in orderList">
					<view class="box">
						<view class="">
							<image class="shop-logo" :src="item.shopLogo" mode="widthFix" />
						</view>
						<view class="list-1">
							<view class="">{{item.shopName}}</view>
							<view class="">{{item.createTime}}</view>
						</view>
					</view>
					<view class="line-gray"></view>
					<view class="list-info" @tap='openOrderInfo(item)'>
						<view class="">
							<view class="info"
								:class="info.verificationStatus == 0 ||info.verificationStatus==undefined ? '':'text-bias'"
								v-for="info in item.goodSkuDto">
								<text>{{info.goodsName}}</text>
								<text>x{{info.number}}</text>
								<text>{{info.goodsPrice}} 积分</text>
							</view>

						</view>

						<view class="info last">
							<text>总计</text>
							<text></text>
							<text>{{item.goodsPrice}}积分</text>
						</view>

					</view>

					<view class="line-gray">
					</view>
					<view v-if="item.orderStatus==-1" @tap="payOrder(1,item.goodsPrice,item.orderNumber)"
						class="aj pay">
						立即支付
					</view>
					<view v-if="item.orderStatus == 1 && item.isTakes==-1" class="aj catCode"
						@tap='payOrder(2,item.goodsPrice,item.orderNumber)'>
						查看订单码
					</view>
					<view v-if="item.orderStatus == -3" class="aj pay"
						@tap='openOrderInfo(item)'>
						退款中
					</view>
					<view v-if="item.orderStatus == 1 && item.isTakes==1" class="aj catCode">
						<text v-if="item.takesState==1" class="beihuo">商家正在备货</text>
						<text v-if="item.takesState==2" class="peisong">商家正在配送中</text>
						<text v-if="item.takesState==3" class="songda">商品已送达</text>
					</view>
					<view v-if="item.orderStatus == 1 && item.isTakes==2"  @tap='openOrderInfo(item)' class="aj catCode">
						<text class="beihuo" >查看自取详情</text>
					</view>
					<view v-if="item.orderStatus == 3 || item.orderStatus == 4 " class="aj cancel">
						订单已取消
					</view>
					<view v-if="item.orderStatus == 2" class="aj cancel">
						订单已完成
					</view>
				</view>

				<view v-if="isNull" class="order_null">
					<image src="../../static/images/order/order_null.png"></image>
					<text>暂时还没有订单~</text>
					<button class="btn-shop-list" @tap='shopList()'>去逛逛</button>
				</view>

			</scroll-view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<!-- <view v-if="payState==1">
				<view class="pop-cart box-c">
					<view class="djc-s-a pop-cart-list-1">
						<text class="iconfont iconcha" @tap="closePup"></text>
						<text @tap='topUp'>充值积分</text>
					</view>
					<view class="djc-c-a pop-cart-list-2">
						<text>支付积分</text>
					</view>
					<view class="djc-c-a pop-cart-list-3">
						<text>{{pupPrice}}</text>
					</view>

					<view class="line-pop pop-cart-list-4">
					</view>
					<view class="djc-c-a pop-cart-list-5">
						<text @tap="pay()">
							确认支付
						</text>
					</view>
				</view>
			</view> -->
			<view  class="pop-cart box-c">
				<view class="djc-s-a pop-cart-list-1">
					<text class="iconfont iconcha" @tap="closePup"></text>
					<!-- 占位符 -->
					<text></text>
				</view>
				<view class="djc-s-a pop-cart-list-2 qrcode-title">
					商家扫码即可完成核销
				</view>

				<view class="box-c d-ai-c d-ac-c mb-4">
					<!-- <image style="width: 550rpx; height: 550rpx;" src="../../static/images/QR/QRcode.png" lazy-load> -->
					<!-- </image> -->
					<canvas canvas-id="qrcode" style="width: 250px;height: 250px;" class="animated fadeIn" />
				</view>

			</view>

		</uni-popup>
		<wybpopup ref="popup1" type='bottom'>
			<view class="popup">
				<view class="pop-t">
					<image class="pop_images1" src="../../static/images/shoplist/guanbi@2x.png" mode="" @tap="close()"></image>
					<view>选择支付方式</view>
				</view>
				<view class="pop-c">
					<text>￥</text>
					<text>{{pupPrice}}</text>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image v-if="item.value==='1'" class="pop_images2" src="../../static/images/shoplist/jfzf@2x.png" mode=""></image>
							<image v-if="item.value==='2'" class="pop_images2" src="../../static/images/shoplist/wxzf@2x.png" mode=""></image>
							<view class="pop-name">
								<text>{{item.name}}</text>
								<text v-if="item.value==='1'">(剩余{{userInfo.userInfo.accumulatePoints}}积分)</text>
							</view>
						</view>
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<button class="payment" type="default" @tap='pay()'>
					立即支付
				</button>
		
		
			</view>
		
		</wybpopup>
	</view>
	
	</view>
</template>

<script>
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				items: [{
						value: '1',
						name: '积分支付'
					},
					{
						value: '2',
						name: '微信支付',
						checked: 'true'
					}
				
				],
				current: 0,
				payState: '',
				pupPrice: 0,
				pupOrderNo: [],
				orderHeight: 500,
				isActive: 0,
				tabList: [{
					id: "1",
					name: '全部'
				}, {
					id: "2",
					name: '待支付'
				}, {
					id: "3",
					name: '待使用'
				}, {
					id: "4",
					name: '已完成'
				}, {
					id: "5",
					name: '已取消'
				},
				{
					id: "6",
					name: '退款'
				},],
				orderList: [],
				userId: 1,
				pageNum: 1,
				pageSize: 10,
				isNull: false,
				hasNextPage: true,
				refresherThreshold: 50,
				refresherTriggered: false,
				_refresherTriggered: false

			}
		},
		computed:mapState(['loginState', 'userInfo']),
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(90) //windoHeight为窗口高度，主要使用的是这个

				}
			})
		},
		onLoad(parameter) {
			console.log(parameter.payState)
			this.isActive = parameter.payState == undefined ? 0 : parameter.payState
			if (parameter.payState == undefined || parameter.payState == 0) {
				this.payState = ''
			} else if (parameter.payState == 1) {
				this.payState = -1
			} else if (parameter.payState == 2) {
				this.payState = 1
			} else if (parameter.payState == 3) {
				this.payState = 2
			} else if (parameter.payState == 4) {
				this.payState = 3
			}

			this.getOrderList(this.payState)

		},
		onShow() {
			let carData = ''
			let _this = this
			_this.getUserInfo()
			uni.$on("carData", (rel) => {
				carData = rel
				if (carData == 1) { //充值页面返回
					_this.isActive = 0
					_this.getOrderList('')
				} else {
					_this.getOrderList(_this.payState)
				}
			})
			_this.closePup()

		},
		methods: {
			...mapMutations(['logout', 'setUserInfo','delReserveTime']),
			// 获取用户信息
			getUserInfo() {
				
				console.log(this.loginState)
				console.log(this.userInfo)
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			open() {
				this.$refs.popup1.show()
			},
			close() {
				this.$refs.popup1.hide()
			},
			async make(pupOrderNo) {
				console.log(pupOrderNo)
				// 回调方式
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: pupOrderNo,
					size: 250,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						console.log(res)
					}
				})

				// Promise
				// uQRCode.make({
				// 	canvasId: 'qrcode',
				// 	componentInstance: this,
				// 	text: 'uQRCode',
				// 	size: 150,
				// 	margin: 5,
				// 	backgroundColor: '#ffffff',
				// 	foregroundColor: '#000000',
				// 	fileType: 'jpg',
				// 	correctLevel: uQRCode.errorCorrectLevel.H
				// }).then(res => {
				// 	console.log(res)
				// })

				// 同步等待
				// var res = await uQRCode.make({
				// 	canvasId: 'qrcode',
				// 	componentInstance: this,
				// 	text: 'uQRCode',
				// 	size: 150,
				// 	margin: 5,
				// 	backgroundColor: '#ffffff',
				// 	foregroundColor: '#000000',
				// 	fileType: 'jpg',
				// 	correctLevel: uQRCode.errorCorrectLevel.H
				// })
				// console.log(res)
			},
			openOrderInfo(item){
				// 判断订单类型
				if(item.isTakes==1 || item.isTakes==2){
					uni.navigateTo({
						url:'order-info?orderNumber='+item.orderNumber
					})
				}
				if(item.isTakes==-1 ){
					//到店消费订单
					uni.navigateTo({
						url:'order-info-arrive?orderNumber='+item.orderNumber
					})
				}



			},

			nextPage() {
				let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.getOrderList({
						orderStatus: this.payState
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							// console.log("-----"+JSON.stringify(this.orderList))
							for (var i = 0; i < res.data.data.list.length; i++) {
								_this.orderList.push(res.data.data.list[i])
							}
							this.hasNextPage = res.data.data.hasNextPage

						}
					})
				}

			},
			shopList() {
				uni.switchTab({
					url: '../shopList/shopList'
				})
			},
			refresherrefresh() {
				console.log("自定义下拉刷新被触发");
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.getOrderList(_this.payState)
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1500)

			},
			//获取订单列表
      //获取订单列表
      getOrderList(payState) {
        console.log(this.payState)
        let _this = this
        this.pageNum = 1
        this.$api.getOrderList({
          orderStatus: payState
        }, this.pageNum, this.pageSize).then((res) => {
          if (res.data.code == 200) {
            _this.orderList = res.data.data.list
            console.log("11====" + JSON.stringify(_this.orderList))
            _this.isNull = _this.orderList.length < 1 ? true : false
            _this.hasNextPage = res.data.data.hasNextPage

          }
        })
      },
			//充值积分
			topUp() {
				uni.navigateTo({
					url: '../pay/pay',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},
			// 去支付
			pay() {
				//选择支付弹框
				let type=1
				if(this.current===0){
					type=1
				}
				if(this.current===1){
					type=2
				}
				let _this = this;
				uni.showLoading({
					title: '正在支付...',
					mask: true
				})
				this.$api.payOrder({
					orderNo: this.pupOrderNo,
					type:type
				}).then((res) => {
					
					if(type==1){ //余额支付
						if (res.data.code == 200) {
							uni.navigateTo({
								url: '../pay/pay-state'
							});
						
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							_this.close()
							setTimeout(function() {
								uni.navigateTo({
									url: '../pay/pay'
								});
							}, 1000);
						
						}
					}else if(type==2){
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: res.data.data,
							success:(res)=> {
								uni.showToast({
									title: "支付成功",
									duration: 2500,
								});
								_this.close()
								setTimeout(function() {
									uni.navigateTo({
										url: '../pay/pay'
									})
								}, 1700);
						
							},
							fail(e) {
								console.log(e)
								uni.showToast({
									title: "支付失败",
									duration: 2000,
									icon: 'none',
								});
							
						
							}
						})
					}
					
					

				})

			},

			//关闭弹框
			closePup() {
				if (this.$refs.popup !== undefined) {
					this.$refs.popup.close()
				}
			},
			//打开立即支付弹框
			payOrder(payState, pupPrice, pupOrderNo) {
				let _this = this
				console.log(pupOrderNo)
				this.payState = payState
				this.pupPrice = pupPrice
				this.pupOrderNo.splice(0)
				this.pupOrderNo.push(pupOrderNo)
				if(payState===1){
					this.$refs.popup1.show()
					// this.$refs.popup.open('bottom')
				}else if(payState===2){
					// this.$refs.popup1.show()
					this.$refs.popup.open('bottom')
				}
				
				setTimeout(function() {
					_this.make(pupOrderNo)
				}, 100);
			},
			//点击事件改变swiper
			changeTab(active) {
				this.isActive = active
				if (active == 0) {
					this.payState = ''
				} else if (active == 1) {
					this.payState = -1
				} else if (active == 2) {
					this.payState = 1
				} else if (active == 3) {
					this.payState = 2
				} else if (active == 4) {
					this.payState = 3
				}
				else if (active == 5) {
					this.payState = 9
				}
				this.getOrderList(this.payState)

			},


		}
	}
</script>

<style scoped>
	.payment{
		width: 670rpx;
		height: 88rpx;
		background: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		line-height: 120rpx;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		display: flex;
		align-items: center;
		text-align: center;
		margin-top: 40rpx;
	}
	.pop-t>view{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 210rpx;
	}
	.pop_images1{
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
	.popup {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
	}
	.cancel {
		color: #999999;
	}
	.beihuo{
		color: #6680ff;
	}
	.peisong{
		color: #FF5551;

	}
	.songda{
		color: #999;
	}
	.canvas {
		height: 230px;
		width: 230px;
		margin: 5rpx 0;
	}

	.btn-shop-list {
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}

	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}

	.order_null image {
		margin: 60rpx auto;
		width: 250rpx;
		height: 250rpx;
	}

	.qrcode-title {
		margin: 0 auto;
		color: #b0b0b0;
	}

	.pop-cart-list-5 text {
		font-size: 36rpx;
		font-weight: 600;
		color: #FF5551;
		padding: 20rpx 0 0 0;

	}

	.pop-cart-list-3 text {
		font-size: 40rpx;
		font-weight: 600;
		padding: 5rpx 0 20px 0;

	}

	.pop-cart-list-2{
		color: #a3a3a3;
		padding-bottom: 15rpx;
	}

	.pop-cart-list-1 text:first-child {
		color: #cecece;

	}

	.pop-cart-list-1 text:last-child {
		color: #5890ff;

	}

	.line-pop {
		height: 2rpx;
		background-color: #f0f0f0;
		width: 100%;
		margin: auto;
		border-radius: 24rpx;
	}

	.djc-s-a {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.djc-c-a {
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.pop-cart {
		width: 550rpx;
		height: auto;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 15rpx;
	}

	.list-1 {
		padding: 0 0 0 20rpx;
	}

	.list-1 view:nth-child(1) {
		font-weight: 600;
	}

	.list-1 view:nth-child(2) {
		font-size: 24rpx;
		color: #9e9e9e;
	}

	.info {
		width: 680rpx;
		margin: 0 auto;
		padding-top: 15rpx;

	}

	.pay {
		padding: 15rpx 0rpx 0rpx 0rpx;
		color: #FF5551;
		font-weight: 500;
		font-size: 30rpx;
	}

	.catCode {
		padding: 15rpx 0rpx 0rpx 0rpx;
		color: #5890ff;
		font-weight: 500;
		font-size: 30rpx;
	}

	.aj {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info {
		display: flex;
		justify-content: space-between;
	}

	.info text:nth-child(1) {
		flex: 1.8;
	}

	.info text:nth-child(2) {
		flex: 1;
		color: #959595;
	}

	.info text:nth-child(3) {
		flex: 1.4;
		text-align: center;
	}

	.last text:first-child {
		font-weight: 600;

	}

	.last text:last-child {
		font-weight: 600;
		color: #FF5551;

	}

	.shop-logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		border: #EEEEEE solid 1rpx;
	}

	.card {
		display: flex;
		width: 650rpx;
		margin: 10rpx auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;


	}

	.swiper {
		width: 100%;
	}

	.page-section-spacing {
		background-color: #f3f3f3;
		padding-top: 10rpx;
	}

	.line {
		height: 8rpx;
		background-color: #FF5551;
		width: 50%;
		margin: auto;
		border-radius: 50rpx;
		margin-top: 5rpx;
	}

	.line-gray {
		height: 1rpx;
		width: 660rpx;
		background-color: #f0f0f0;
		margin: auto;
		border-radius: 24rpx;
		z-index: 99;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H>view {
		font-size: 33rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 124rpx;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		font-size: 34rpx;
	}

	,
	.tab-bar {
		/* #ifdef APP-PLUS */
		width: 750rpx;
		/* #endif */
		height: 42px;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	,
	.tabs {
		flex: 1;
		flex-direction: column;
		background-color: #ffffff;
	}

	,
	.title-1 {}

	.score {
		color: #ff0000;
		position: absolute;
		right: 50rpx;

	}

	.del-order {
		right: 200rpx;
		padding: 0rpx 15rpx;

	}

	.sub-order {
		color: #ffffff;
		padding: 0rpx 15rpx;
		right: 30rpx;
	}

	.image_icon {
		width: 140upx;
		height: 140upx;
	}

	.active {
		color: #a7a7a7;
	}

	.title {
		padding: 10rpx;
		font-size: 28rpx;
		width: 150rpx;
		text-align: center;

	}

	.box {
		flex-direction: row;
		display: flex;
	}

	.box-c {
		flex-direction: column;
		display: flex;
	}
</style>
